<template>
    <div class="w_h_100">
        <div class="forms">
            <div class="w_100 headTips m_t_20">
                <div class="d_f a_i_c">
                    <div class="line"></div>
                    项目列表
                </div>
            </div>
            <div class="d_f j_c_s_b a_i_c" v-if="!isExpand">
                <div class="searchForm">
                    <myform :fields="fields" :model="values" class="m_t_10" :options="options">
                    </myform>
                </div>
                <div class="btn d_f a_i_c">
                    <el-button @click="resetting">重置</el-button>
                    <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
                    <span class="expand d_f a_i_c" @click="screen(true)">展开筛选 <img src="../../assets/below.png" alt=""
                            class="m_l_5"></span>
                </div>
            </div>
            <div v-else>
                <div class="searchForm">
                    <myform :fields="fields1" :model="values" class="m_t_10" :options="options"
                        @handleSelect="handleSelect">
                        <template v-slot:num>
                            <div class="d_f a_i_c">
                                <el-input v-model="values.approveMoneyStart" placeholder="请输入" type="number" />
                                <span class="padding">至</span>
                                <el-input v-model="values.approveMoneyEnd" placeholder="请输入" type="number" />
                            </div>
                        </template>
                    </myform>
                </div>
                <div class="d_f j_c_s_b">
                    <span></span>
                    <div class="btn d_f a_i_c">
                        <el-button @click="resetting">重置</el-button>
                        <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
                        <span class="expand d_f a_i_c" @click="screen(false)">收起筛选 <img src="../../assets/up.png" alt=""
                                class="m_l_5"></span>
                    </div>
                </div>
            </div>
            <div class="d_f m_t_20 j_c_s_b" v-if="category=='1'">
                <div></div>
                <el-button :type="disabled ? 'info' : 'danger'" plain @click="PauseBatch" v-if="type=='1'"
                    :disabled="disabled" v-hasPerm="'financingBatchPauseBatch'">暂停批次</el-button>
                    <el-button :type="disabled ? 'info' : 'danger'" plain @click="PauseBatch" v-else
                    :disabled="disabled" v-hasPerm="'financingBatchFrontPauseBatch'">暂停批次</el-button>
            </div>
            <div class="d_f m_t_20 j_c_s_b" v-else>
                <div></div>
                <el-button :type="disabled ? 'info' : 'danger'" plain @click="PauseBatch"
                    :disabled="disabled" v-hasPerm="'noFinancingBatchPauseBatch'">暂停批次</el-button>
            </div>
            <mytable :fields="tableFields" width="110" :isHight="false" :values="values" :isSelection="true"
                @selecSelection="selecSelection" api="batchDetailPage" ref="tableRef" class="m_t_10">
                <template v-slot:timeLimit="{ row }">
                    <span>{{ row.timeLimit || '0' }}天</span>
                </template>
                <template v-slot:isConsistent="{row}">
                    <span>{{ row.isConsistent==1?'是':row.isConsistent==2?'否':'-' }}</span>
                </template>
                <template v-slot:approveStatus="{ row }">
                    <span v-if="row.approveStatus==0">未知</span>
                    <span v-if="row.approveStatus==1">待审批</span>
                    <span v-if="row.approveStatus==2">已通过</span>
                    <span v-if="row.approveStatus==3">已拒绝</span>
                    <span v-if="row.approveStatus==4">已取消</span>
                    <span v-if="row.approveStatus==5">正常</span>
                    <span v-if="row.approveStatus==6">超时</span>
                </template>
                <template v-slot:masterStatus="{ row }">
                    <div class="success_status" v-if="row.masterStatus == 0">
                <img src="../../assets/normal.png" alt="" class="status_img">
                <span>正常</span>
              </div>
              <div class="success_status" v-if="row.masterStatus == 1">
                <img src="../../assets/normal.png" alt="" class="status_img">
                <span>在途</span>
              </div>
              <div class="pause_status" v-if="row.masterStatus == 2">
                <img src="../../assets/pause.png" alt="" class="status_img">
                <span>暂停</span>
              </div>
              <div class="settle_status" v-if="row.masterStatus == 3">
                <img src="../../assets/settle.png" alt="" class="status_img">
                <span>结清</span>
              </div>
              <div class="settle_status" v-if="row.masterStatus == 4">
                <img src="../../assets/settle.png" alt="" class="status_img">
                <span>解保</span>
              </div>
              <div class="abnormal_status" v-if="row.masterStatus == 5">
                <img src="../../assets/abnormal.png" alt="" class="status_img">
                <span>逾期</span>
              </div>
              <div class="extension_status" v-if="row.masterStatus == 6">
                <img src="../../assets/extension.png" alt="" class="status_img">
                <span>展期</span>
              </div>
              <div class="noRead_status1" v-if="row.masterStatus == 7">
                <img src="../../assets/noRead.png" alt="" class="status_img">
                <span>预警</span>
              </div>
              <div class="compensation_status" v-if="row.masterStatus == 8">
                <img src="../../assets/compensation.png" alt="" class="status_img">
                <span>代偿</span>
              </div>
                </template>
                <template v-slot:productName="{ row }">
                    <div class="d_f a_i_c">
                        <div class="isRead" v-if="row.isRead == 0"></div>
                        <div class="noRead" v-else></div>
                        {{ row.productName }}
                    </div>
                </template>
                <template v-slot:operation="{ row }">
                    <div class="d_f j_c_s_b">
                        <span class="edit" @click="detail(row)">查看详情</span>
                    </div>
                </template>
            </mytable>
            <div class="w_100 headTips m_t_20">
                <div class="d_f a_i_c">
                    <div class="line"></div>
                    批次审批流程
                </div>
            </div>
            <mytable :fields="approvalFields" width="110" :isHight="false" :handle="false" :isPaginationShow="false"
                :defaultList="approvalData"  class="m_t_10" :isSelection="false">
                <template v-slot:resultStatus="{ row }">
                    <span v-if="row.resultStatus == 0" >未知</span>
                    <span v-if="row.resultStatus == 1" >待审批</span>
                    <span v-if="row.resultStatus == 2" >已通过</span>
                    <span v-if="row.resultStatus == 3" >已拒绝</span>
                    <span v-if="row.resultStatus == 4" >已取消</span>
                    <span v-if="row.resultStatus == 5" >正常</span>
                    <span v-if="row.resultStatus == 6" >超时</span>
                </template>

            </mytable>
        </div>
        <el-dialog v-model="dialogVisible" title="暂停批次" width="500" :before-close="handleClose">
            <div class="isBack">
                <myform :fields="fields2" ref="form1" labelPosition="top" :model="model" class="m_t_10">
                </myform>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="danger" @click="pauseQuery">确 认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { batchHisDetail, batchStop, updateStatus } from '../../api/agent'
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { copy } from '../../utils/date'
import { ElMessageBox } from 'element-plus'
import { Message } from '../../utils/resetMessage'
import { batchDetailsType } from './data'
const values = {
    batchNo: '',
    bizKey: '',
    masterStatus: '',
    repaymentMode: '',
    approveStatus: '',
    approveMoneyStart: '',
    approveMoneyEnd: '',
    isBusinessManagement:false
}
const model = {
    remark: '',
}
export default defineComponent({
    name: '',
    props: {
        information: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: String,
            default: '0'
        },
        isBusinessManagement:{
                type: Boolean,
            default: false
        }
    },
    setup(prop: any) {
        const data: batchDetailsType = reactive({
            tableFields: [
                {
                    label: '项目编号',
                    prop: 'projectNo',
                    width: '250px',
                },
                {
                    label: '客户名称',
                    prop: 'customerName',
                    width: '250px',
                },
                {
                    label: '证件号',
                    prop: 'idCard',
                    width: '250px',
                },
                {
                    label: '产品名称',
                    prop: 'productName',
                    width: '250px',
                },
                {
                    label: '最新审批金额(元)',
                    prop: 'approveMoney',
                    width: '250px',
                },
                {
                    label: '最新审批期限(月)',
                    prop: 'approvePeriod',
                    width: '250px',
                },
                {
                    label: '最新担保费率(%)',
                    prop: 'guaranteeRate',
                    width: '250px',
                },
                {
                    label: '应收保费(元)',
                    prop: 'receivablePremium',
                    width: '250px',
                },
                {
                    label: '分配处理人结果',
                    prop: 'assignee',
                    width: '250px',
                },
                {
                    label: '保费计算是否一致',
                    prop: 'isConsistent',
                    width: '250px',
                },
                {
                    label: '最新审批结论',
                    prop: 'approveStatus',
                    width: '250px',
                },
                {
                    label: '项目状态',
                    prop: 'masterStatus',
                    width: '250px',
                },
            ],
            approvalFields: [
                {
                    label: '任务名称',
                    prop: 'nodeName',
                    width: '250px',
                },
                {
                    label: '审批人',
                    prop: 'empName',
                    width: '150px',
                },
                {
                    label: '审批时间',
                    prop: 'approveTime',
                    width: '200px',
                },
                {
                    label: '流程时长',
                    prop: 'timeCost',
                    width: '200px',
                },
                {
                    label: '审批结论',
                    prop: 'resultStatus',
                    width: '150px',
                },

                {
                    label: '备注',
                    prop: 'remark',
                    width: '150px',
                },
            ],
            approvalData: [],
            fields: [
                {
                    label: "项目搜索",
                    prop: 'bizKey',
                    placeholder: '客户名称/项目编号/证件号码',
                    type: 'input',
                    labelWidth: '70px'
                },
            ],
            fields1: [
                {
                    label: "项目搜索",
                    prop: 'bizKey',
                    placeholder: '客户名称/项目编号/证件号码',
                    type: 'input',
                    labelWidth: '120px'
                },
                {
                    label: "项目状态",
                    prop: 'masterStatus',
                    placeholder: '请选择',
                    type: 'select',
                    labelWidth: '120px',
                    bindLabel: 'name',
                    bindValue: 'id',
                },
                // {
                //     label: "最新贷款方式",
                //     prop: 'repaymentMode',
                //     placeholder: '请选择',
                //     type: 'select',
                //     labelWidth: '120px',
                //     bindLabel: 'name',
                //     bindValue: 'id',
                // },
                {
                    label: "最新审批结论",
                    prop: 'approveStatus',
                    placeholder: '请选择',
                    type: 'select',
                    labelWidth: '120px',
                    bindLabel: 'name',
                    bindValue: 'id',
                },
                {
                    label: "最新审批金额",
                    prop: 'num',
                },
            ],
            values: copy(values),
            options: {
                masterStatus: [
                    {
                        name: '正常',
                        id: '0'
                    },
                    {
                        name: '在途',
                        id: '1'
                    },
                    {
                        name: '暂停',
                        id: '2'
                    },
                    {
                        name: '结清',
                        id: '3'
                    },
                    {
                        name: '解保',
                        id: '4'
                    },
                    {
                        name: '逾期',
                        id: '5'
                    },
                    {
                        name: '展期',
                        id: '6'
                    },
                    {
                        name: '预警',
                        id: '7'
                    },
                    {
                        name: '代偿',
                        id: '8'
                    },
                ],
                approveStatus:[
                {
                        name: '未知',
                        id: '0'
                    },
                    {
                        name: '待审批',
                        id: '1'
                    },
                    {
                        name: '已通过',
                        id: '2'
                    },
                    {
                        name: '已拒绝',
                        id: '3'
                    },
                    {
                        name: '已取消',
                        id: '4'
                    },
                    {
                        name: '正常',
                        id: '5'
                    },
                    {
                        name: '超时',
                        id: '6'
                    },
                ],
            },
            dialogVisible: false,
            model: copy(model),
            fields2: [
                {
                    label: "意见备注",
                    prop: 'remark',
                    placeholder: '请输入意见备注',
                    type: 'textarea',
                    labelWidth: '70px'
                },
            ],
            isExpand: false,
            selection: [],
            disabled: false,
            type:'1',
            category:"2"
        })
        const route = useRoute()
        const router = useRouter()
        const tableRef = ref()
        onBeforeMount(() => {
            data.values.isBusinessManagement=prop.isBusinessManagement
            data.values.batchNo = route.query.batchNo as string
            data.disabled = prop.disabled == 0 && data.selection.length > 0 ? false : true
            methods.getData()
        })
        const methods = {
            getData() {
                batchHisDetail({ batchNo: route.query.batchNo as string }).then((res: any) => {
                    data.approvalData = res
                })
            },
            detail(row) {
                console.log(route.query.category as string);
                if(route.query.category as string =='2'){
                    router.push({ path: '/agent/financingBatch/information', query: { id: row.id, projectId: row.projectId, productId: prop.information.productId, nodeId: prop.information.nodeId, nodeName: prop.information.nodeName, type: route.query.nodeCategory as string,category:1 } })
                }else{
                    router.push({ path: '/agent/noFinancingBatch/information', query: { id: row.id, projectId: row.projectId, productId: prop.information.productId, nodeId: prop.information.nodeId, nodeName: prop.information.nodeName, type: route.query.nodeCategory as string,category:3 } })
                }
                
            },
            //是否展开筛选
            screen(flag: boolean) {
                data.isExpand = flag
            },
            //重置表单搜索
            resetting() {
                data.values = copy(values)
                data.values.batchNo = route.query.batchNo as string
                data.values.isBusinessManagement=prop.isBusinessManagement
                tableRef.value.resettingTable(data.values)
                
            },
            //搜索
            searchFor() {
                tableRef.value.handleCurrentChange(1)
            },
            //获取表格选中项
            selecSelection(selection: any) {
                data.selection = selection
                data.disabled = prop.disabled == 0 && data.selection.length > 0 ? false : true
            },
            handleClose() {
                data.dialogVisible = false
                data.model = copy(model)
            },
            PauseBatch() {
                if (data.selection.length == 0) return Message({ type: 'warning', message: '请选择要操作的数据' })
                data.dialogVisible = true
            },
            pauseQuery() {
                let ids = []
                ids = data.selection.map(item => item.id)
                batchStop({ ids: ids }).then(() => {
                    updateStatus({ ids: ids, remark: data.model.remark }).then(() => {
                        Message({ type: 'success', message: '暂停成功' })
                        tableRef.value.handleCurrentChange(1)
                        methods.handleClose()
                    })

                })
            },
            handleSelect() {

            }
        }
        return {
            ...toRefs(data), ...methods, tableRef, Search
        }
    }
})
</script>
<style scoped lang='scss'>
.forms {
    width: calc(100% - 64px);
    height: calc(100% - 80px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);

    padding: 1px 32px 24px 32px;
    overflow-y: auto;
}

.bottom {
    background: #fff;
    padding: 32px;
    width: calc(100% - 64px);
}

.expand {
    color: #1878FF;
    font-size: 14px;
    margin-left: 8px;
    cursor: pointer;
}

.padding {
    padding: 0px 5px;
}
</style>